import './index.css'
import {
    AppOutline,
    UserOutline,
    MessageOutline,
    ExclamationCircleOutline,
} from 'antd-mobile-icons'
import {Button, NavBar, TabBar} from 'antd-mobile'
import {Route, useLocation, useNavigate, MemoryRouter as Router} from 'react-router-dom';
import React, {useEffect} from "react";
import MGTRouter from "../../routes";
import {LoginProps} from "../login";


const Bottom = () => {
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline/>,
        },
        {
            key: '/fault',
            title: '故障',
            icon: <ExclamationCircleOutline/>,
        },
        {
            key: '/account',
            title: '我的',
            icon: <UserOutline/>,
        },
    ]
    const location = useLocation()
    const navigate = useNavigate()
    const {pathname} = location

    const setRouteActive = (value: string) => {
        navigate(value)
    }
    return <div>
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title}/>
            ))}
        </TabBar>
    </div>
}

const Home = (props: LoginProps) => {
    const {setLoginInfo} = props;
    return <div>
        <Router initialEntries={['/']}>
            <div className={"app"}>
                <span className={'logout'} onClick={() => {
                    setLoginInfo({}, 'false')
                }}>退出</span>
                <div className={"top"}>
                    济南电池与空调信息数字化管理
                </div>
                <div className={"body"}>
                    <MGTRouter/>
                </div>
                <div className={"bottom"}>
                    <Bottom/>
                </div>
            </div>
        </Router>
    </div>
}
export default Home
